<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>俄罗斯方块</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="start-container">
        <p><button id="btn-start">开始游戏</button></p>
        <p><button id="btn-setting">设置</button></p>
    </div>
    <div class="game-container">
        <div class="timer-panel">
            <div class="panel-header">
                使用时间
            </div>
            <div class="panel-body">
                <canvas id="timer"></canvas>
            </div>
        </div>
        <div class="help-panel">
            <div class="panel-body">
                <p>↑ 翻转方块</p>
                <p>↓ 加速下落</p>
                <p>→ 向右移动</p>
                <p>← 向左移动</p>
            </div>
        </div>
        <div class="level-panel">
            <div class="panel-header">
                当前级别
            </div>
            <div class="panel-body">
                <canvas id="level"></canvas>
            </div>
        </div>
        <div class="game-main-panel">
            <canvas id="c_game_main"></canvas>
        </div>
        <div class="next-panel">
            <div class="panel-header">
                下一方块
            </div>
            <div class="panel-body">
                <canvas id="nextshape"></canvas>
            </div>
        </div>
        <div class="setting-panel">
            <div class="panel-body">
                <button id="btn-game-pause">暂停</button><br><br><button id="btn-game-setting">设置</button>
            </div>
        </div>
        <div class="score-panel">
            <div class="panel-header">
                当前得分
            </div>
            <div class="panel-body">
                <canvas id="score"></canvas>
            </div>
        </div>
        <div class="high-score-panel">
            <div class="panel-header">
                最高得分
            </div>
            <div class="panel-body">
                <canvas id="highscore"></canvas>
            </div>
        </div>
    </div>
    <div class="modal-dialog">
        <div class="modal-body">
            <label for="ck-sound">启用声音</label>
            <input type="checkbox" id="ck-sound">
            <br>
            <br>
            <button id="btn-dialog-close">关闭</button>
        </div>
    </div>
    <script src="vendor/howler.min.js"></script>
    <script src="js/config.js"></script>
    <script src="js/ResourceManager.js"></script>
    <script src="js/Canvas.js"></script>
    <script src="js/Keyboard.js"></script>
    <script src="js/Score.js"></script>
    <script src="js/Timer.js"></script>
    <script src="js/Level.js"></script>
    <script src="js/NextShape.js"></script>
    <script src="js/HighScore.js"></script>
    <script src="js/Block.js"></script>
    <script src="js/Shape.js"></script>
    <script src="js/Board.js"></script>
    <script src="js/Tetris.js"></script>
    <script src="js/app.js"></script>
</body>

</html>